<template>
  <view class="customer-service">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="客户服务"></van-nav-bar>
    <!-- #endif -->
    <view class="shadow" @tap="closeShadow" v-if="data.showSearchList"></view>
    <view class="list" :style="listStyle">
      <!-- 广告 -->
      <view class="banner" v-if="data.adList.length === 0"></view>
      <swiper
        v-if="data.adList.length > 0"
        class="ad-wrap"
        circular
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500">
        <swiper-item v-for="(item, index) in data.adList" :key="index">
          <image class="swiper-item" :src="item.advPicture" @tap="tapAdv(item)"></image>
        </swiper-item>
      </swiper>
      <view class="search" ref="searchRef">
        <view class="search-icon-search">
          <view class="iconfont icon-search"></view>
        </view>
        <input
          maxlength="30"
          class="search-input"
          placeholder="请输入问题描述"
          v-model="data.searchInput"
          type="text"
          confirm-type="search"
          @confirm="onConfirm" />
        <view class="search-icon-close" @tap.stop="closeInput" v-if="data.searchInput">
          <view class="iconfont icon-close"></view>
        </view>
        <view class="search-text" @tap="onConfirm">搜索</view>
        <view class="search-ul" v-if="data.showSearchList">
          <template v-if="data.searchList.length > 0">
            <view
              class="search-li"
              v-for="(item, index) in data.searchList"
              :key="index"
              @tap.stop="queryDetail(item.id)">
              {{ item.problemState }}
            </view>
          </template>
          <view class="search-none" v-if="data.searchList.length === 0">无匹配问题</view>
        </view>
      </view>
      <view class="question-flex">
        <view class="question">
          <view class="question-title">常见问题</view>
          <view class="question-tab" v-if="data.tabList.length > 0">
            <view
              v-for="(item, index) in data.tabList"
              :key="index"
              :class="[
                'question-tab-li',
                data.activeTab === item.value ? 'question-tab-li-active' : '',
              ]"
              @tap.stop="changeTab(item)">
              {{ item.label }}
            </view>
          </view>
          <view class="question-nodata" v-if="data.tabList.length === 0 && data.firstLoad">
            <view class="img"></view>
            <view class="text">暂无数据</view>
          </view>
          <view class="question-cont" :style="questionContH5" v-if="data.activeTab">
            <QcscrollUni
              ref="mescrollRef"
              :getData="getData"
              :top="topScroll"
              :bottom="bottomScroll"
              :height="heightScroll">
              <view
                :class="['question-cont-li', index === 0 ? 'question-cont-li-first' : '']"
                v-for="(item, index) in data.contList"
                :key="index"
                @tap.stop="queryDetail(item.id)">
                {{ item.problemState }}
              </view>
              <template #nodata>
                <view class="question-none" v-if="data.contList.length === 0">尚无可查看问题</view>
              </template>
            </QcscrollUni>
            <view class="question-none" v-if="!data.activeTab">尚无可查看问题</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-wrap">
      <button class="bnt-wrap bnt" @tap="jumpToPhone">电话客服</button>
    </view>
    <!-- 客服电话 -->
    <uni-popup ref="phoneRef" type="dialog" class="popup-phone">
      <view class="box-wrap">
        <view class="info-wrap">
          <view class="item-wrap">客服电话：{{ showPhoneStr }}</view>
          <view class="item-wrap">工作时间：{{ timePhone }}</view>
        </view>
        <view class="btn-wrap">
          <view class="btn btn1" @tap="hide">取消</view>
          <view class="btn btn2" @tap="tapPhoneCall">拨号</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="phoneRefLznt" type="dialog" class="popup-phonelznt">
      <view class="box-wrap">
        <view class="title-wrap">请选择客服电话</view>
        <view class="info-wrap">
          <view
            v-for="(item, index) in showPhoneList"
            :key="index"
            class="item-wrap"
            :class="{ 'item-top': index === 0 }"
            @tap="tapPhone(index)">
            <!-- <view class="iconfont icon-user"></view> -->
            <view class="text" :class="{ text1: data.selectInd === index }">
              {{ item }}
            </view>
            <view
              class="iconfont icon-select"
              :class="{ 'select-show': data.selectInd === index }"></view>
          </view>
        </view>
        <view class="btn-wrap">
          <button class="btn btn1" @tap="hide">取消</button>
          <button class="btn btn2" @tap="tapPhoneCallLznt">去拨打</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { questionAppQuestion, queryQuestionClsss } from '@/service/apis/mine';
import { getSystemInfo, getUserId, getwv, setToastInstance } from '@mixins/info';
import { queryCustomerAdvertise } from '@/service/apis/advert';
import { getLocationInfo } from '@/utils/location';
import { callTel, handleAd } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');

const appType = import.meta.env.VITE_VUE_APP_TYPE;
const showPhoneStr = import.meta.env.VITE_VUE_APP_SHOW_PHONE;
const callPhoneStr = import.meta.env.VITE_VUE_APP_CALL_PHONE;
const timePhone = ref(import.meta.env.VITE_VUE_APP_TIME_PHONE);

const showPhoneList = ref([]);
const callPhoneList = ref([]);
const selectPhone = ref('');
if (showPhoneStr.indexOf(',') > -1) {
  showPhoneList.value = showPhoneStr.split(',');
  callPhoneList.value = callPhoneStr.split(',');
  selectPhone.value = showPhoneList.value[0];
} else {
  selectPhone.value = callPhoneStr;
}

// 样式
const systemInfo = getSystemInfo();

let listStyle = ref(`height: ${systemInfo.screenHeight - systemInfo.safeBottom - 62}px`);
// #ifdef H5
listStyle.value = `height: ${
  systemInfo.screenHeight - systemInfo.navHeight - systemInfo.safeBottom - 62
}px`;
// #endif

const data = reactive({
  searchInput: '',
  searchList: [] as any[],
  showSearchList: false,
  tabList: [] as any[],
  firstLoad: false,
  activeTab: '',
  contList: [] as any[],
  adList: [] as any,
  selectInd: 0,
});

const searchRef = ref();

const bottomH = getwv(74) + Number(`${systemInfo.safeBottom}`);

const topScroll = `586rpx`;
const bottomScroll = `${bottomH}px`;
const heightScroll = ref(
  `${
    systemInfo.screenHeight -
    getwv(295) -
    bottomH -
    systemInfo.statusBarHeight -
    systemInfo.navigationBarHeight
  }px`
);

const mescrollRef = ref();

const questionContH5 = computed(() => {
  // #ifdef H5
  return `height: ${
    systemInfo.screenHeight - getwv(296) - getwv(74) - systemInfo.safeBottom - systemInfo.navHeight
  }px`;
  // #endif
  return '';
});

// 上拉加载的回调
const getData = (
  extraParams: { pageNum: number; pageSize: number } = { pageNum: 1, pageSize: 10 }
) => {
  console.log('上拉加载的回调11');
  return new Promise(resolve => {
    questionAppQuestion({ parentId: data.activeTab }, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          data.contList = res.dataList;
          mescrollRef.value?.setList(data.contList, res.totalCount, extraParams);
        } else {
          data.contList = [...data.contList, ...res.dataList];
        }
        resolve({ list: data.contList, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

const closeShadow = () => {
  data.showSearchList = false;
};

// 初始化数据
const initData = () => {
  queryQuestionClsss({})
    .then((res: any) => {
      console.log(res);
      data.firstLoad = true;
      data.tabList = res.listMap || [];
      if (data.tabList.length > 0) {
        data.activeTab = data.tabList[0].value;
      }
    })
    .catch(() => {
      data.firstLoad = true;
    });
};

const getAdv = () => {
  const userId = getUserId();
  const info = getLocationInfo();
  queryCustomerAdvertise({
    cityName: info.cityName,
    userId: userId,
  }).then(res => {
    if (res) {
      data.adList = res || [];
    }
  });
};

const tapAdv = (row: any) => {
  handleAd(row);
};

const phoneRef = ref();
const phoneRefLznt = ref();

const jumpToPhone = () => {
  if (appType === 'pnd') {
    callTel(selectPhone.value);
  } else if (appType === 'lznt') {
    phoneRefLznt.value.open();
  } else {
    phoneRef.value.open();
  }
};

const tapPhone = (inx: number) => {
  data.selectInd = inx;
  selectPhone.value = callPhoneList.value[inx];
};

const hide = () => {
  if (appType === 'lznt') {
    phoneRefLznt.value?.close();
  } else {
    phoneRef.value?.close();
  }
};

const tapPhoneCall = () => {
  callTel(selectPhone.value);
};

const tapPhoneCallLznt = () => {
  if (data.selectInd < 0) {
    return;
  }
  callTel(selectPhone.value);
};

// 键盘搜索
const onConfirm = () => {
  questionAppQuestion(
    {
      problemState: data.searchInput,
    },
    { pageNum: 1, pageSize: 1000 }
  ).then((res: any) => {
    data.showSearchList = true;
    data.searchList = res.dataList;
  });
};

const closeInput = () => {
  data.searchInput = '';
  data.showSearchList = false;
};

const queryDetail = (id: string) => {
  uni.navigateTo({
    url: `/pagesMyCenter/customerService/customerServiceDetail?id=${id}`,
  });
};

// 切换分类
const changeTab = (item: any) => {
  data.activeTab = item.value;
  mescrollRef.value?.resetUpScroll();
};

onLoad(() => {
  initData();
  getAdv();
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.customer-service {
  width: 100vw;
  // height: 100vh;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  background-color: #f2f2f2;
  box-sizing: border-box;
  .shadow {
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .list {
    position: relative;
    height: calc(100% - 62px - constant(safe-area-inset-bottom));
    height: calc(100% - 62px - env(safe-area-inset-bottom));
    overflow-y: scroll;
  }

  .banner {
    width: 100%;
    height: 143px;
    background-image: url($url + 'mine/customer-service.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .ad-wrap {
    width: 100%;
    height: 143px;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  .search {
    width: 343px;
    // width: 300px;
    height: 39px;
    margin-left: 16px;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 12px 16px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 6px;
    position: relative;
    z-index: 5;

    &-icon-search {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      margin-right: 6px;

      .iconfont {
        font-size: 12px;
        color: #4d4d4d;
      }
    }

    &-icon-close {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      margin-left: 15px;

      .iconfont {
        font-size: 12px;
        color: #4d4d4d;
      }
    }

    &-input {
      flex: 1;
      height: 16px;
      color: #545454;
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 16px;
    }

    &-text {
      color: #5073f7;
      font-family: PingFang SC;
      font-size: 14px;
      padding-left: 5px;
    }

    &-ul {
      position: absolute;
      z-index: 2;
      top: 43px;
      left: 0;
      width: 343px;
      height: 300px;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
    }

    &-li {
      box-sizing: border-box;
      padding: 12px 8px 26px 8px;
      color: #31373d;
      font-size: 12px;
      border-bottom: 1px solid #eee;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:last-child {
        border-bottom: none;
      }
    }

    &-none {
      color: #858585;
      font-size: 13px;
      font-weight: 700;
      line-height: 12px;
      text-align: center;
      margin-top: 120px;
    }
  }

  .question-flex {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .question {
    width: 343px;
    // min-height: 349px;
    box-sizing: border-box;
    position: relative;
    background-color: #ffffff;
    // margin-left: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    &-title {
      padding-top: 12px;
      padding-left: 9px;
      color: #5073f7;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
    }

    &-tab {
      display: flex;
      // width: 322px;
      // height: 29px;
      // margin: 12px 9px;
      width: 340px;
      height: 53px;
      padding: 12px 9px;
      box-sizing: border-box;
      overflow-x: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      &-li {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 6px 16px;
        border-radius: 18px;
        color: #858585;
        font-size: 12px;
        letter-spacing: -0.3px;
        border: 1px solid #5073f7;
        margin-right: 8px;
        white-space: nowrap;

        &:last-child {
          margin-right: 0px;
        }

        &-active {
          color: #ffffff;
          background: #5073f7;
        }
      }
    }

    &-nodata {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .img {
        margin-top: 20px;
        width: 201px;
        height: 184px;
        background-image: url($url + 'no-data.png');
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 1;
      }

      .text {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.4);
        z-index: 1;
      }
    }

    &-cont {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 296px - 62px - 12px - constant(safe-area-inset-bottom));
      height: calc(100vh - 296px - 62px - 12px - env(safe-area-inset-bottom));

      ::v-deep .mescroll-uni {
        background-color: #fff;
        // left: 16px;
        // right: 16px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;

        .question-cont-li {
          box-sizing: border-box;
          padding: 10px 9px;
          border-top: 1px solid #eee;
          color: #191919;
          font-size: 14px;
          line-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          &-first {
            border-top: none;
          }
        }
      }
    }

    &-none {
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
      text-align: center;
      color: #b5b5b5;
      font-size: 14px;
      line-height: 22px;
      margin-top: 117px;
    }
  }

  .bottom-wrap {
    position: absolute;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    width: 100vw;
    // height: calc(62px + constant(safe-area-inset-bottom));
    // height: calc(62px + env(safe-area-inset-bottom));
    height: 62px;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-top: 1px solid #e6e6e6;

    .bnt {
      width: 100%;
      height: 40px;
      margin-top: 12px;
      border-radius: 50px;
      font-size: 16px;
    }
  }

  .popup-phone {
    .box-wrap {
      background-color: #fff;
      border-radius: 16px;
    }

    .info-wrap {
      display: flex;
      flex-direction: column;
      padding: 0 24px;
      max-height: 40vh;

      .item-wrap {
        display: flex;
        align-items: center;
        width: 242px;
        height: 42px;
        line-height: 42px;
        margin-left: 20px;

        &:first-child {
          margin-top: 20px;
        }
      }
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 0 27px 0;

      .btn {
        box-sizing: border-box;
        width: 114px;
        height: 38px;
        margin: 0 6px;
        font-size: 14px;
        border: 1px solid #d5d5d5;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn1 {
        color: #545454;
        background-color: #fff;
      }

      .btn2 {
        color: #fff;
        border-color: $uni-color-primary;
        background-color: $uni-color-primary;
      }
    }
  }

  .popup-phonelznt {
    .box-wrap {
      background-color: #fff;
      border-radius: 16px;
    }

    .title-wrap {
      line-height: 22px;
      font-size: 16px;
      padding: 24px 17px 14px 17px;
    }

    .info-wrap {
      display: flex;
      flex-direction: column;
      padding: 0 24px;
      max-height: 40vh;
      overflow: auto;

      .item-wrap {
        display: flex;
        align-items: center;
        width: 262px;
        height: 42px;
        min-height: 42px;
        margin-top: 11px;
        background-color: #f7f7f7;
        border-radius: 50px;

        &.item-top {
          margin-top: 0;
        }

        .text {
          display: flex;
          justify-content: center;
          width: 100%;
          color: #858585;
        }

        .text1 {
          color: $uni-color-primary;
        }

        .icon-user {
          margin-left: 24px;
          font-size: 26px;
          color: #666666;
        }

        .icon-select {
          visibility: hidden;
          margin-right: 15px;
          font-size: 15px;
          color: $uni-color-primary;
        }

        .select-show {
          visibility: visible;
        }
      }
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 0 27px 0;

      .btn {
        width: 114px;
        height: 38px;
        margin: 0 6px;
        font-size: 14px;
        border: 1px solid #d5d5d5;
        border-radius: 50px;
      }

      .btn1 {
        color: #545454;
        background-color: #fff;
      }

      .btn2 {
        color: #fff;
        border-color: $uni-color-primary;
        background-color: $uni-color-primary;
      }
    }
  }
}
</style>
